<template>
    <div class="app-container editcss">
        <div style="display: flex;" v-loading="loading" element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading">
            <div class="editHeld_conter_left">
                <el-upload class="avatar-uploader" :show-file-list="false" :headers="token"
                :action="urlsd+'/api/admin/upload-img'" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <div v-if="image_all" class="avatar">
                        <img :src="image_all">
                        <div>点击更换</div>
                    </div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip">建议尺寸：375*812px</div>
                </el-upload>
            </div>
            <div style="display: flex;align-items: flex-end;margin-left: 20px;padding-bottom: 26px;">
                <el-button type="primary" @click="submit">保 存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getbanner, getbanneredit } from '@/api/common.js'
export default {
    name: 'WorkspaceJsonWelcome',

    data() {
        return {
            image_all: '',
            image: '',
            token: {},
            loading:false,
            urlsd:process.env.NODE_ENV=='development'?'':process.env.VUE_APP_BASE_API
        };
    },

    mounted() {
        this.token = {
            "Authorization": getToken()
        }
        this.getInit()
    },

    methods: {
        getInit() {
            this.loading = true
            getbanner().then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.loading = false
                    this.image_all = res.data.image_all
                }
            })
        },
        submit() {
            let that = this
            if (that.image == '') {
                that.$Toast('请上传图片')
                return
            }
            let data = {}
            data.image = that.image
            getbanneredit(data).then(res => {
                console.log(res);
                if (res.code == 200) {
                    that.$modal.msgSuccess(res.message)
                    that.getInit()
                } else {
                    that.$modal.msgError(res.message)
                }
            })
        },
        handleAvatarSuccess(res, file) {
            let that = this
            if (res.code == 200) {
                that.image_all = res.data.img_path_all
                that.image = res.data.img_path
            }

        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }

    },
};
</script>
<style lang="scss" scoped>
::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 649.6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editHeld_conter_left .avatar {
    width: 300px;
    height: 649.6px;
    display: block;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
    }
}
</style>